<template>
  <el-form ref="form"  :model="form" label-width="80px">
    <el-form-item label="单词"  v-if="showheader">
      <el-col :span="6">
          {{form.word}}
      </el-col>
      <el-col :span="6" :inline="true">
          等级：<el-rate v-model="form.star" style="display:inline-block" disabled></el-rate>
      </el-col>
      <el-col :span="4" :inline="true">
          <el-switch ative-text="继续学习" inactive-text="已经掌握" v-model="form.success"></el-switch>
      </el-col>
      <el-col :span="8" :inline="true">
          学习次数：<el-progress style="width:150px;display:inline-block;" :inline="true" :percentage="form.classtime" :colors="percentcolors"></el-progress>
      </el-col>
    </el-form-item>
    <el-form-item style="background-color:rgba(200,200,200,0.5)">
        <ol>
            <li style="padding:0" v-for="(item,index) in form.explanations" :key="index">{{item.property}}  {{item.explanation}}</li>
        </ol>
    </el-form-item>
    <el-form-item label="近义词" v-if="form.synonym.length">
        <el-popover
        ref="elpopover"
    placement="top-start"
    :title="synonym"
    width="200"
    trigger="hover"
    :content="explanation" v-for="synonym in form.synonym" :key="synonym" @show="getword(synonym)" @hide="explanation='loading...'">
          <el-tag slot="reference" style="margin-left:5px;!important">{{synonym}}</el-tag> 
        </el-popover>
    </el-form-item>
    <el-form-item label="反义词" v-if="form.antonym.length">
        <el-tag type="success" v-for="antonym in form.antonym" :key="antonym" >{{antonym}}</el-tag>
    </el-form-item>
    <el-form-item label="例句" v-for="(it,index) in form.sentence" :key="index">
      {{it}}
    </el-form-item>
    <el-form-item label="备注" v-if="form.remarks[0]">
      <el-input style="font-size:12px;background-color:blue;" disabled type="textarea" v-model="form.remarks[0]"></el-input>
    </el-form-item> 
  </el-form>
</template>
<script>
import {get} from '../request';
export default {
  data() {
    return {
      showheader:false,
      form:null,
      explanation:'loading...',
    };
  },
  computed:{
    //explanation:'loading...'
  },
  created(){
    console.log('wordinfo created');
    this.form = this.formdata;
  },
  props:{
    formdata:{
      type:Object
    }
  },
  methods: {
    getword2(word){
      return 'kkkk';
    },
    getword(word){
      console.log(word);
      let popover =   this.$refs.elpopover.filter(element=>element.title===word)[0];
      console.log(popover);
      get("api/searchwords/"+word,(res,err)=>{
        if(err){
          console.log(err);
        }else{
          console.log(res);
          if(res.data.words.length !==0){
            this.$refs.elpopover.filter(element=>element.title===word)[0].$nextTick(function () {
                 console.log(this);
                 this.content = res.data.words[0].explanations[0].explanation;
            })
          }
        }
      },(err)=>{console.log(err);});  
    },
  }
};
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>